<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二次贝塞尔求交</title>
    <script src="../dep/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .point {
            position: absolute;
            width: 9px;
            height: 9px;
            margin-left: -5px;
            margin-top: -5px;
            border: 1px solid red;
        }

        #start-point {
            border-color: green;
        }

        #end-point {
            border-color: black;
        }

        #control-point {
            border-color: blue;
        }

    </style>
</head>
<body>
    <div id="start-point" class="point" data-index="0"></div>
    <div id="end-point" class="point" data-index="1"></div>
    <div id="control-point" class="point" data-index="2"></div>
    <div id="start-point1" class="point" data-index="3"></div>
    <div id="end-point1" class="point" data-index="4"></div>
    <div id="control-point1" class="point" data-index="5"></div>

    <canvas id="canvas" width="800" height="600">
    </canvas>

</body>
</html>
